<h1>Google Analytics</h1>
<fieldset>
    <legend>Búsqueda</legend>
    <table>
        <tr>
            <td>Seleccione una de sus cuentas</td>
            <td>
                <select id="account" name="account">
                  <?php foreach($google_accounts as $google_account){ ?>
                    <option value="<?php echo $google_account['id']; ?>">
                        <?php echo $google_account['name']; ?></option>
                  <?php } ?>
                </select>
            </td>
        </tr>
        <tr>
            <td>Métrica</td>
            <td>
                <select id="metric" name="metric">
                    <option value="ga:visits">Visitas</option>
                    <option value="ga:newVisits">Visitas nuevas</option>
                    <option value="ga:percentNewVisits">Porcentaje de visitas nuevas</option>
                    <option value="ga:avgTimeOnSite">Promedio de duración de las visitas</option>
                    <option value="ga:bounces">Número de rebotes</option>
                    <option value="ga:timeOnSite">The total duration of visitor sessions</option>
                    <option value="ga:visitors">Total number of visitors to your website</option>
                </select>
            </td>
            <td>
                <em>Referencia:
                    <a href="https://developers.google.com/analytics/devguides/reporting/core/dimsmets#cats=visitor,session,trafficsources,adwords,goalconversions,system,geonetwork,pagetracking,internalsearch,sitespeed,eventtracking,ecommerce,customvars,time" target="_blank">
                        Link</a></em>
            </td>
        </tr>
        <tr>
            <td>Rango de fechas</td>
            <td>Desde <input type="text" id="date_from" name="date_from" value="2012-08-01" /></td>
            <td>Hasta <input type="text" id="date_to" name="date_to" value="2012-08-10" /></td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <input type="button" value="VOILA!" onclick="ajax_search();" />
            </td>
        </tr>
    </table>
</fieldset>
<div id="results"></div>
<script type="text/javascript">
function ajax_search(){
    var account = $("#account").val();
    var metric = $("#metric").val();
    var date_from = $("#date_from").val();
    var date_to = $("#date_to").val();
    $("#results").html("Cargando ...");
    $.ajax({
        type: "post",
        url: "<?php echo url_for('@ajax_google_analytics_search') ?>",
        data: "account="+account+"&metric="+metric+"&date_from="+date_from+"&date_to="+date_to,
        success: function(html){
            $("#results").html(html);
        }
    });
}
</script>